<template>
    <div>
        <el-card>
            <div slot="header">
                <span class="title">
                    <h3>农事操作</h3>
                </span>
            </div>
            <el-row>
                <el-col :span='24'>
                    <el-button class='theme-button float-right' @click='add' icon='el-icon-plus'>新增</el-button>
                </el-col>
            </el-row>
            <el-row class='mt-20'>
                <el-col :span='24'>
                    <el-table v-loading='tableLoading' :data='tableData' stripe border :header-cell-style="{ background: 'rgba(2,179,134,0.1)',color:'rgba(0,0,0,0.85)'}">
                        <el-table-column align='center' type='index' label='序号'></el-table-column>
                        <el-table-column align='center' prop='type' label='操作名称'></el-table-column>
                        <el-table-column align='center' label='是否上传图片'>
                            <template slot-scope="scope">
                                <el-tag v-if='scope.row.hasImg == 1' type='success'>是</el-tag>
                                <el-tag v-else type='danger'>否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column  align='center' label='是否需要投入品'>
                            <template slot-scope="scope">
                                <el-tag v-if='scope.row.typeLevel == 1' type='success'>是</el-tag>
                                <el-tag v-else type='danger'>否</el-tag>
                            </template>
                        </el-table-column>
<!--                        <el-table-column align='center' label='应用状态'>-->
<!--                            <template slot-scope='scope'>-->
<!--                                <el-switch v-model='scope.row.state' @change='switchChange(scope.row,$event)'  active-color="#13ce66" inactive-color="#ff4949"></el-switch>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                        <el-table-column align='center' prop='createTime' label='添加时间'></el-table-column>
                        <el-table-column align='center' prop='lastModifyTime' label='上次修改时间'></el-table-column>
                        <el-table-column align='center' type='operation' label='操作'>
                            <template slot-scope='scope'>
                                <el-button style='margin-right: 10px' type='text' @click='edit(scope.row)'>编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm='del(scope.row)'>
                                    <el-button slot="reference" type='text' style='color: red'>删除</el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        background
                        class='mt-20 text-right'
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageNum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :title='dialogTitle' :visible.sync='dialogVisible' width='40%'>
            <el-form :model='form' :rules='rules' ref='form'>
                <el-form-item label='操作名称：' prop='type'>
                    <el-input v-model='form.type'></el-input>
                </el-form-item>
                <el-form-item label='是否上传图片：' prop='hasImg'>
                    <el-radio-group v-model='form.hasImg'>
                        <el-radio label='1'>是</el-radio>
                        <el-radio label='0'>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='是否需要投入品：' prop='typeLevel'>
                    <el-radio-group v-model='form.typeLevel'>
                        <el-radio label='1'>是</el-radio>
                        <el-radio label='0'>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if='form.typeLevel == 1' label='投入品类型：' prop='inputType'>
                    <el-radio-group v-model='form.inputType'>
                        <el-radio label='1'>化肥</el-radio>
                        <el-radio label='0'>农药</el-radio>
                    </el-radio-group>
                </el-form-item>
<!--                <el-form-item label='应用状态：' prop='state'>-->
<!--                    <el-switch v-model='form.state' active-color="#13ce66" inactive-color="#ff4949"></el-switch>-->
<!--                </el-form-item>-->
            </el-form>
            <span slot='footer' class='dialog-footer'>
                <el-button @click='dialogVisible = false'>取 消</el-button>
                <el-button class='theme-button' :loading='loading' @click='submitForm'>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { deletePlantOperationType, getPlantOperationTypeList, updatePlantOperationType } from '@/request/api';

export default {
    name: 'plantTask',
    data() {
        return {
            tableData: [],
            page: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
            tableLoading:false,
            loading:false,
            dialogVisible: false,
            rules: {
                type: [
                    { required: true, message: '请输入操作名称', trigger: 'blur' }
                ],
                hasImg: [
                    { required: true, message: '请选择是否上传图片', trigger: 'change' }
                ],
                inputType: [
                    { required: true, message: '请选择投入品类型', trigger: 'change' }
                ],
                typeLevel: [
                    { required: true, message: '请选择是否需要投入品', trigger: 'change' }
                ],
            },
            dialogTitle:'新增',
            form: {
                type: '',
                hasImg: '',
                inputType: '',
                state:false,
                typeLevel:'',
                createTime: '',
                lastModifyTime: '',
            }
        }
    },
    watch:{
        dialogVisible(val){
            if(!val){
                this.form = {
                    type: '',
                    hasImg: '',
                    inputType: '',
                    state:false,
                    typeLevel:'',
                    createTime: '',
                    lastModifyTime: '',
                }
                this.$refs.form.resetFields();
                this.getTableData()
            }
        }
    },
    mounted() {
        this.getTableData()
    },
    methods:{
        //增
        add(){
            this.dialogTitle = '新增'
            this.dialogVisible = true
        },
        //删
        async del(row){
            try {
                let idList = []
                idList.push(row.id)
                const res = await deletePlantOperationType(idList)
                console.log(res);
                if(res && res.code == 200){
                    this.$message({
                        message:'删除成功',
                        type:'success'
                    })
                    this.getTableData()
                }else{
                    this.$message({
                        message:res.errMsg,
                        type:'error'
                    })
                    this.getTableData()
                }
            }catch (e) {
                //已在axios中处理
            }
        },
        //查
        async getTableData(){
            this.tableLoading = true
            let params = {
                page: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            const res = await getPlantOperationTypeList(params)
            if(res && res.code == 200){
                this.tableData = res.data.content
                this.tableData = this.tableData.map(item=>{
                    item.state = item.state == 1 ? true : false
                    return item
                })
                this.page.total = res.data.totalElements
                this.tableLoading = false
            }else{
                this.$message({
                    message:'服务器错误，查询表格数据失败',
                    type:'error'
                })
                this.tableLoading = false

            }
        },
        //改
        edit(row){
            console.log(row);
            this.dialogTitle = '编辑'
            this.dialogVisible = true
            this.form = row
            // this.form.state = this.form.state == 1 ? true : false
        },
        switchChange(row,e){
            this.form = row
            let _this = this;
            (function sub(){
                let state = row.state
                state = state ? 1:0
                let params = row
                params.state = state
                updatePlantOperationType(params).then(res=>{
                    if (res.code == 200){
                        _this.$message({
                            message:'操作成功',
                            type:'success'
                        })
                        _this.getTableData()
                    }
                }).catch(err=>{
                    console.log(err);
                    _this.$message.error(err)
                })
            })()
        },

        submitForm(){
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.loading = true
                    // this.form.state = this.form.state ? 1 : 0
                    this.form.state = 1
                    this.form.createTime = this.form.createTime ? this.form.createTime:this.$util.dateFormat('yyyy-MM-dd HH:mm:ss',new Date())
                    this.form.lastModifyTime = this.form.lastModifyTime ? this.form.lastModifyTime:this.$util.dateFormat('yyyy-MM-dd HH:mm:ss',new Date())
                    // console.log(this.form);
                    updatePlantOperationType(this.form).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message:'操作成功',
                                type:'success'
                            })
                        }
                        this.dialogVisible = false
                    }).catch(err=>{
                        if (err.data){
                            this.$message({
                                message:err.data.errMsg,
                                type:'error'
                            })
                        }
                    })
                }
                this.loading = false
            })
        },
        handleSizeChange(v){
            this.page.pageSize = v;
            this.getTableData()
        },
        handleCurrentChange(v){
            this.page.pageNum = v;
            this.getTableData()
        },

    }
};
</script>
<style lang='less' scoped>
@import "@/assets/css/common.less";
.float-right{
    float: right;
}
.mt-20{
    margin-top: 20px;
}
.text-right{
    text-align: right;
}
</style>
